require('../../assets/js/common.js')
require('./msgchange.less')
require('../../assets/fonts/iconfont.css')

/* 引入axios */
let axios = require('../../utils/axios')

/* 引入dom元素获取 */
const { $, $$, $$$ } = require('../../utils/dom')

//引入weui
require('weui')  //样式库
const weui = require('weui.js') //weui.js

/* 文档加载 */
$(function () {
    /* 点击<返回上一级页面 */
    $$('#headimg').addEventListener('click', function () {
        // console.log(1);
        history.back()
    })

    /* 点击图片加载文件选择 */
    $$('.portrait').addEventListener('click', function () {
        $$('#file').click();
    })

    /* 上传图片 */
    $$('#file').addEventListener('change', function () {
        // console.dir(this.files[0]);
        const fd = new FormData();/* 实例化文件对象 */
        fd.append('file', this.files[0])
        // console.log(fd);
        axios.post('/api/shared/uploadPortrait1', fd).then(function (res) {
            // console.log(res);
            if (res.data.errno === 0) {
                // console.log(res.data.data.url)
                $$('.portrait').src = 'http://47.96.154.185:3701' + res.data.data.url
            }
        })
    })

    /* 性别选择 */
    $$('#genderbox').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            /* onChange: function (result) {
                console.log(result);
            }, */
            onConfirm: function (result) {
                console.log(result[0].label);
                $$('#gender').textContent = `${result[0].label}`
            },
            title: '性别选择器'
        });
    });

    /* 日期选择 */
    $$('#birthdaybox').addEventListener('click', function () {
        weui.datePicker({
            start: 1920,
            end: new Date().getFullYear(),
            // onChange: function (result) {
            //     console.log(result);
            // },
            onConfirm: function (result) {
                $$('#birthday').textContent = result.map(function (v) {
                    return v.value < 10 ? '0' + v.value : v.value
                }).join('-')

            },
            title: '日期选择器'
        });
    });
    /* 省份选择 */
    let pid = 0;
    $$('#provincebox').addEventListener('click', function () {
        axios.get('api/shared/province').then(function (res) {
            // console.log(res.data.data);
            let arr = res.data.data.map(function (v) {
                return {
                    label: v.name,
                    value: v.id
                }
            })
            // console.log(arr);
            weui.picker(arr, {
                /* onChange: function (result) {
                    console.log(result);
                }, */
                onConfirm: function (result) {
                    // console.log(result[0].label);
                    $$('#province').textContent = `${result[0].label}`
                    pid = result[0].value
                    $$('#city').textContent = '请选择'
                },
                title: '省份选择器'
            });
        })

    });

    let cid = 0;
    /* 城市选择 */
    $$('#citybox').addEventListener('click', function () {
        axios.get('api/shared/city', {
            params: {
                provinceId: pid
            }
        }).then(function (res) {
            // console.log(res.data.data);
            let arr = res.data.data.map(function (v) {
                return {
                    label: v.name,
                    value: v.id
                }
            })
            // console.log(arr);
            weui.picker(arr, {
                /* onChange: function (result) {
                    console.log(result);
                }, */
                onConfirm: function (result) {
                    $$('#city').textContent = `${result[0].label}`
                    cid = result[0].value
                },
                title: '城市选择器'
            });
        })

    });

    /* 个性签名 */
    $$('#desc').addEventListener('input', function () {
        /* 限制字数长度为 sa */
        let sa = 200;
        $$('#desclen').textContent = $$('#desc').value.length
        if ($$('#desc').value.length >= sa) {
            $$('#desc').value = $$('#desc').value.substr(0, sa)
            $$('#desclen').textContent = sa;
        }
    })
    /* 保存信息 */
    $$('#savebtn').addEventListener('click', function () {
        axios.post('/api/user/changeInfo', {
            nickName: $$('#nickName').value,
            gender: $$('#gender').textContent == '男' ? 0 : 1,
            provinceId: pid,
            cityId: cid,
            birthday: $$('#birthday').textContent,
            imgUrl: $$('.portrait').src,
            sign: $$('#desc').value
        }).then(function (res) {
            console.log(res);
            localStorage.setItem('token', res.data.data.token);
            location.href = './my.html'
        })
    })

    /* 数据回填 */
    axios.get('/api/user/info').then(function (res) {
        /* 先通过本地存储的token获取个人信息 */
        let data = res.data.data;
        console.log(res.data.data);
        console.log(data.nickName);
        /* 将获取到的信息对象键值对一一对应渲染到页面上 */
        $$('#nickName').value = data.nickName;
        $$('#desc').value = data.sign;
        $$('.portrait').src = data.imgUrl;
        $$('#gender').textContent = data.gender == '0' ? '男' : '女'
        $$('#birthday').textContent = data.birthday
        /* 请求省份的参数 */
        axios.get('api/shared/province').then(function (res) {
            /* 将获取到的请求体通过filter查询省份编号返还该省份的对象 */
            let ac = res.data.data.filter(function (v) {
                return v.id == data.provinceId
            })
            $$('#province').textContent = ac[0].name
            pid=ac[0].id
        })
        axios.get('/api/shared/city', {
            params:
            {
                provinceId: data.provinceId
            }
        }).then(function(res){
            let ad = res.data.data.filter(function (v) {
                return v.id == data.cityId
            })
            $$('#city').textContent = ad[0].name
            cid=ad[0].cid
        })
        $$('#desclen').textContent = $$('#desc').value.length

        
    })
})
